<template>
  <div>
    <button type="button" @click="back">后退</button>
    <button type="button" @click="handler">熊猫</button>
    <button type="button" @click="replace">替换</button>
    <button type="button" @click="forward">前进</button>
  </div>
</template>

<script>
export default {
    name: 'Footer' ,
    methods: {
      back(){
        this.$router.back(); // 返回前一个history记录
      },
      handler( e ){
        console.log( e.target.innerHTML );
        console.log( this.$router );

        // this.$router.push( '/panda?age=5' ); // 向history栈添加一个新的记录
        //  根据 路径 导航时可以使用 query 传递参数
        // this.$router.push( { path: '/panda' , query: { age: 5 } } );
        // this.$router.push( { path: '/panda', hash: '#team' } );

        // 根据 路由名称 导航时可以使用 params 传递参数
        this.$router.push( { name: 'panda' , params: { age: 5 } } );
      },
      forward(){
        this.$router.forward(); // 前进至下一个history记录
      },
      replace(){
        // this.$router.push( { path: '/home' , replace: true });
        this.$router.replace( { path: '/home' } );
      }
    }
}
</script>

<style scoped>
div {
  display: flex ;
  justify-content: flex-end ;
  align-items: center ;
  height: 60px ;
}
</style>